<template>
    <div class="visitor">
        <div class="top">
            <div class="left">
                <span class="free">{{ user.isInsure == 1 ? "医保" : "自费" }}</span>
                <span class="username">{{ user.name }}</span>
            </div>
            <div class="right">
                <el-button circle type="primary" size="small" :icon="Edit" @click="handler"></el-button>
                <el-popconfirm v-if="$route.path == '/user/patient'" @confirm="removeUser" :title="`你确定要删除${user.name}`" width="200px">
                    <template #reference>
                        <el-button circle type="danger" size="small" :icon="Delete"></el-button>
                    </template>
                </el-popconfirm>
            </div>
        </div>
        <div class="bottom">
            <p>证件类型:{{ user.param?.certificatesTypeString }}</p>
            <p>证件号码:{{ user.certificatesNo }}</p>
            <p>用户性别:{{ user.sex == 0 ? "女生" : "男士" }}</p>
            <p>出生日期：{{ user.birthdate }}</p>
            <p>手机号码：{{ user.phone }}</p>
            <p>婚姻状况:{{ user.isMarry == 0 ? "未婚" : "已婚" }}</p>
            <p>当前住址{{ user.param?.cityString }}</p>
            <p>详细地址：{{ user.param?.fullAddress }}</p>
            <!-- 红色的已经选择的盒子 -->
            <transition name="confirm">
                <div class="confirm" v-if="index === currentIndex">已选择</div>
            </transition>
        </div>
    </div>
</template>
<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';
import { Edit, Delete } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { reqRemoveUser } from '@/api/user';
import { RemoveUserResponseData } from '@/api/user/type';
let $route = useRoute();
let $router = useRouter();
let props = defineProps(["user", "index", "currentIndex"]);
let $emit = defineEmits(["changeScene", 'removeUser']);

//相应就诊人组件修改按钮的回调
const handler = () => {
    //要么是就诊人管理模块点击修改按钮
    //要么预约挂号点击修改按钮
    if ($route.path == "/user/patient") {
        $emit("changeScene", props.user);
    } else {
        //路由跳转携带参数
        $router.push({ path: "/user/patient", query: { type: "edit", id: props.user.id } });
    }
}
const removeUser = async () => {
    try {
        //删除用户成功
        let result: RemoveUserResponseData = await reqRemoveUser(props.user.id);
        if (result.data) {
            //消息提示
            ElMessage({
                type: 'success',
                message: '删除成功'
            });
            $emit('removeUser');
        } else {
            //消息提示
            ElMessage({
                type: 'error',
                message: '删除失败'
            });
        }
    } catch (error) {
        ElMessage({
            type: 'error',
            message: '删除失败'
        });
    }
}
</script>

<style lang="scss" scoped>
.visitor {
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);

    .top {
        height: 45px;
        background-color: #e5e5e5;
        display: flex;
        justify-content: space-around;
        align-items: center;

        .left {
            display: flex;

            .free {
                font-size: 14px;
                background-color: white;
                padding: 5px;
                border-radius: 5px;
            }

            .username {
                margin-left: 10px;
                color: #7f7f7f;
                padding: 5px;
            }
        }

        .right {}
    }

    .bottom {
        position: relative;
        padding: 15px;

        p {
            line-height: 30px;
        }

        .confirm {
            position: absolute;
            right: 5%;
            top: 5%;
            opacity: 0.5;
            color: red;
            border-radius: 50%;
            border: 1px dashed red;
            text-align: center;
            width: 100px;
            height: 100px;
            line-height: 100px;
            transform: rotate(35deg);
            font-weight: 900;
        }

        .confirm-enter-from {
            transform: scale(1);
        }

        .confirm-enter-active {
            transition: all 0.3s;
        }

        .confirm-enter-to {
            transform: scale(1.2);
        }
    }
}
</style>